<html>
<head>
<title>Fil Pilote</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
	function refresh() {
		// Fetch data
		$("#error").empty();
		$.getJSON('../status', function(data) {
			// Only clear this part on success 
			$(".time").empty();
			$(".zones").empty();
			// set time 
			$(".time").append(document.createTextNode(data.time));

			/*
			 $.each(data, function(key, val) {
			 items.push('<li id="' + key + '">' + val + '</li>');
			 });

			 $('<ul/>', {
			 'class': 'my-new-list',
			 html: items.join('')
			 }).appendTo('body');
			*/

			// zones
			$.each(data.zones, function(index, zone) {
				
				$("<h1/>", {
					id : "zone_" + zone.index,
					html : zone.name
				}).appendTo(".zones");

 				// wires
 				var l = $("<ul/>", {
					'class': 'wires',
				}).appendTo(".zones");
				$.each(zone.wires, function(index, wire) {
					$("<li/>", {
						html   : wire.name,
						'class': wire.mode 
					}).appendTo(l);
				});
			});

			// reload
			setTimeout(refresh, 30000); //millis
		}).fail(function(jqXHR, textStatus, errorThrown) {
			$("#error").empty();
			$("<h1/>", {
				html : textStatus
			}).appendTo("#error");
			$("<p/>", {
				html : errorThrown
			}).appendTo("#error");

			// reload
			setTimeout(refresh, 5000); //millis
		});
	}
	$(document).ready(function() {
		refresh();
	});
</script>
</head>
<body>
	<div class="zones">
		<h1>Zone ?</h1>
		<ul class="zone">
			<li id="0" class="comfort">Wire ?</li>
		</ul>
	</div>
	<p class="update">
		Last refreshed: <span class="time">?</span>
	</p>
	<div id="error"></div>
</body>
</html>